<template>
  <div class="message-board-list-item" v-if="(model.advise?.parentId?model.advise.parentId:model.parentId)=='0'||!parent">
    <div class="user" >
      <img :src="model.advise?.avatar?model.advise.avatar:model.avatar" class="avatar" v-default-img="model.advise?.nickname?model.advise.nickname:model.nickname" />
      <span class="nickname">{{ model.advise?.nickname?model.advise.nickname:model.nickname }}</span>
      <el-tag effect="dark" :type="isUser ? '' : 'success'" size="small">
        {{ isUser ? '用户' : '游客' }}
      </el-tag>
      <span class="os">{{ model.advise?.os?model.advise.os:model.os }}</span>
      <span class="browser">{{ model.advise?.browser?model.advise.browser:model.browser }}</span>
    </div>
    <div class="content">
      <span class="aite" v-if="model.advise?.toName?model.advise.toName:model.toName">@{{ model.advise?.toName?model.advise.toName:model.toName }}:</span>
      <span v-html="content"></span>
    </div>
    <div class="footer">
      <span v-if="user.hadLogin" class="reply-btn" @click="switchShow">
        回复TA
      </span>
      <span class="time">{{ model.advise?.gmtCreate?model.advise.gmtCreate :model.gmtCreate  }}</span>
      <span class="reply-count" v-if="model.advise?.childrenCount?model.advise.childrenCount:model.childrenCount > 0">
        共{{ model.advise?.childrenCount?model.advise.childrenCount:model.childrenCount }}条回复
      </span>
    </div>
    <content-publish
      v-if="showReply"
      v-model="inputText"
      :compact="true"
      :auto-focus="true"
      place-text="..."
      @reply="handleReply"
    />
    <div class="children" v-if="parent">
      <MessageListItem
        v-for="item in model.advise?.childrens"
        :model="item"
        :key="item.id"
        :parent="false"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, provide } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useEmotion } from '/src/hooks/emotion/useEmotions'
import { useComment } from '/src/hooks/content/useComment'
import { postMessage } from '/src/api/message'
import { useUserStore } from '/src/store/user'
import ContentPublish from '/src/components/ContentPublish/index.vue'

const { model, parent } = defineProps({
  model: { type: Object, required: true },
  parent: { type: Boolean, default: false },
})
const isUser = computed(() => (model.advise?.toId?model.advise.toId:model.toId) > 0)
const user = useUserStore()
const router = useRouter()
const content = useEmotion().processWx(model.advise?.content?model.advise.content:model.content)
const { switchShow, showReply, inputText } = useComment()

const handleReply = () => {
  if (!user.hadLogin) return
  postMessage({
    content: inputText.value,
    nickname: user.nickname,
    parentId: parent ? model.advise.id : model.parentId,
  }).then((res) => {
    ElNotification({
      duration: 2000,
      type: 'success',
      message: res.msg,
    })
    router.replace('/redirect')
  })
}
</script>

<style lang="scss" scoped>
.message-board-list-item {
  position: relative;
  min-height: 90px;
  margin-top: 10px;
}

.user {
  display: flex;
  overflow: hidden;
  font-size: 0.9rem;
  white-space: nowrap; /*强制span不换行*/

  > * {
    margin-right: 10px;
    font-size: 12px;
  }

  .nickname {
    margin-left: 10px;
    font-size: 14px;
  }
}

.content {
  margin-top: -10px;
  margin-bottom: 10px;
  margin-left: 60px; /* img 40px margin total 20px 8*/

  > .aite {
    margin-right: 5px;
    color: #4949fc;
  }

  :deep(.wx-emoji) {
    margin-bottom: -4px;
  }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.footer {
  height: 30px;
  margin-left: 60px;
  line-height: 30px;

  > * {
    margin-right: 10px;
    font-size: 12px;
  }

  > .reply-btn {
    padding: 3px;

    &:hover {
      color: gray;
      cursor: pointer;
      background-color: #cecee0;
      border-radius: 5px;
    }
  }

  > .reply-count {
    float: right;
    // color: blueviolet;
    margin-right: 10px;
  }
}

.children {
  margin-top: 10px;
  margin-left: 60px;
  //border-bottom: 1px solid #d1d1d1;
  transition: 0.5s;
}
</style>
